.wiki-nav {
    @include sidebar-narrow-width;
    background-color: $color-gray100;
    padding: 0;
    .title {
        @include font-size(medium);
        color: $color-black900;
        padding: 2rem 1rem 0 1rem;
        @include until($widescreen) {
            font-size: 1.5rem;
            padding: 2rem .75rem 0;
        }
    }
    .add-button {
        align-items: center;
        display: inline-flex;
        margin: 1rem 1rem 1rem .75rem;
        @include until($widescreen) {
            margin: .5rem .75rem;
        }
        .button-small {
            height: 28px;
            margin-right: .5rem;
            width: 28px;
            svg {
                height: 1rem;
                margin: 0;
                width: 1rem;
            }
        }
    }
    .wiki-link-container {
        margin: 0;
        &.wiki-all-links {
            border-top: 1px solid $gray-light;
        }
    }
    input[type='text'] {
        background: $whitish;
        color: $grayer;
        margin: 1rem 1rem 1rem 2rem;
        width: 80%;
        @include placeholder {
            color: $gray-light;
        }
        @include until($widescreen) {
            margin: .5rem .5rem .5rem 1rem;
        }
    }
    .loading {
        padding: 1rem;
        text-align: center;
    }
}

.menu-secondary .wiki-link {
    @include font-type(regular);

    align-items: center;
    border-bottom: 1px solid $color-gray200;
    display: flex;
    justify-content: space-between;
    margin-left: 0;
    padding-left: .75rem;
    padding-right: 1rem;
    position: relative;
    text-transform: uppercase;
    @include until($widescreen) {
        padding-left: .75rem;
    }
    &:last-child {
        border-bottom: 0;
    }
    &:hover {
        background: $color-white;
        a {
            @include font-type(regular);
            color: $color-link-tertiary;
        }
        .remove-wiki-page {
            cursor: pointer;
            opacity: 1;
            transition: opacity .2s linear;
            transition-delay: .1s;
        }
        .dragger {
            cursor: move;
            opacity: 1;
            transition: opacity .2s linear;
            transition-delay: .1s;
        }
    }
    a {
        color: $color-link-tertiary;
        display: block;
        padding: 1rem 0 1rem 1rem;
    }
    &.gu-mirror {
        border-bottom: 0;
    }
    &.fixed-link {
        @include font-size(large);
        text-transform: uppercase;
    }
    &.is-sortable {
        cursor: move;
    }
    &.active {
        @include font-type(medium);
        background: $color-white;
        a {
            color: $color-link-primary;
        }
        &:hover {
            background: $color-white;
            a {
                @include font-type(medium);
                color: $color-link-tertiary;
            }
        }
    }
    .link-title {
        cursor: pointer;
        display: block;
        flex-grow: 1;
        padding: 1rem 0;
    }
    .dragger {
        fill: $gray-light;
        left: -1rem;
        opacity: 0;
        position: absolute;
        top: 1rem;
        svg {
            @include svg-size(.7rem);
        }
    }
    .remove-wiki-page {
        opacity: 0;
        &:hover {
            .icon {
                fill: $red;
            }
        }
    }

}
